import React from 'react';
import { inject,observer } from 'mobx-react';
import * as mobx from 'mobx';
import './index.less';
import { getAntd,getEcCom,getLabel } from '../../../util/convert';

@inject('overTimeStore')
@observer
export default class Main extends React.Component{
    componentDidMount(){
        const { overTimeStore } = this.props;
        overTimeStore.doInit();
    }
    render(){
        const { Button } = getAntd();
        const { WeaTable,WeaDialogFooter,WeaInputNumber,WeaRightMenu } = getEcCom();
        const { overTimeStore } = this.props;
        let { nodeList,nodeDatas } = overTimeStore;
        const columns = [
            {
                title: <span>{getLabel(15070,'节点名称')}</span>,
                key: "nodename",
                dataIndex: "nodename",
                width: "30%",
            },{
                title: <span>{getLabel(385076,'节点超时设置')}</span>,
                key: "setting",
                dataIndex: "setting",
                width: "60%",
            }
        ];
        let dataSource  = [];
        nodeList.length > 0 && nodeList.map(key =>{
            dataSource.push({
                key: key,
                nodename: <span>{nodeDatas["nodename_"+key]}</span>,
                setting: <div className="wf-overtime-setarea">
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@lpwo2c@${key}`} min={0} max={999}
                        value={nodeDatas[`nodepasshour_${key}`]}
                        onChange={(v) =>{
                            overTimeStore.changeDatas(`nodepasshour_${key}`, v);
                        }}
                    />
                    <div className="wf-overtime-hour-text">{getLabel(391,'小时')}</div>
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@5wxwvi@${key}`} min={0} max={60}
                        value={nodeDatas[`nodepassminute_${key}`]}
                        onChange={(v) =>{
                            overTimeStore.changeDatas(`nodepassminute_${key}`, v);
                        }}
                    />
                    <div className="wf-overtime-minute-text">{getLabel(15049,'分钟')}</div>
                </div>
            });
        });
        return (
            <div className="wf-overtime-setting">
                <div className="wf-overtime-table">
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@qz5yub`} {...this.getMoreBtns()}>
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@cwky1c`}
                            columns = {columns}
                            dataSource = {dataSource}
                            pagination = {false}
                        />
                    </WeaRightMenu>
                </div>
                <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@id2dv4`} buttons={this.getButtons()} moreBtn={this.getMoreBtns()} />
            </div>
        )
    }
    getButtons(){
        const { Button } = getAntd();
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@28wr2o@save`} type='primary' onClick={this.doSave}>{getLabel(86,'保存')}</Button>);
        return buttons;
    }
    getMoreBtns(){
        let btns = [];
        btns.push({
            key: '0',
            icon:  <i className='icon-coms-Preservation'/>,
            content: getLabel(86,'保存'),
            onClick: key => this.doSave(),
        });
        return {datas:btns};
    }
    doSave = () => {
        const { overTimeStore } = this.props;
        overTimeStore.doSave();
    }
    doCancel(){
        const { overTimeStore } = this.props;
        overTimeStore.closeEvent();
    }
}
